<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">

            <div class="table-wrapper">
              <el-table
                :data="roleList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >

                <el-table-column
                  prop="role"
                  label="角色名称"
                  align='center'
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="descpt"
                  label="角色说明"
                  align='center'>
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作"
                  width="180">
                  <template slot-scope='scope'>
                    <el-col>
                      <el-button
                        type="text"
                        size="mini"
                        @click='showTreeDialog(scope.row)'
                      >
                        权限设置
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='showDialog(1,scope.row)'
                      >
                        编辑
                      </el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click='delDialog(scope.$index,scope.row)'
                      >
                        删除
                      </el-button>
                    </el-col>
                  </template>
                </el-table-column>
              </el-table>

              <div class="table-footer">
                <el-row>
                  <el-col>
                    <el-button @click="showDialog(0)" size="small">
                      添加
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <!--          <div class="pagination">-->
          <!--            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"-->
          <!--                        @handleSizeChange="handleSizeChange"></pagination>-->
          <!--          </div>-->

          <!-- 删除提示框 -->
          <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow()">确 定</el-button>
            </div>
          </el-dialog>

          <!-- tree提示框 -->
          <el-dialog :visible.sync="treeVisible" width="500px" center :modal-append-to-body="false">
            <el-tree
              :data="permissionList"
              show-checkbox
              node-key="id"
              ref="tree"
              :default-checked-keys="defaultCheckKeys"
              default-expand-all
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.name }}</span>
            </span>
            </el-tree>

            <div class="tree-btn">
              <el-button @click="getCheckedNodes">确定</el-button>
              <el-button @click="treeVisible = false">取消</el-button>
            </div>
          </el-dialog>

          <!-- 编辑提示框 -->
          <el-dialog :visible.sync="dialogFormVisible" width="500px" center :modal-append-to-body="false">
            <div>

              <el-row>
                <el-form class="form" label-width="80px" :model="addParams">
                  <el-col>
                    <el-form-item label="角色名称">
                      <el-input v-model="addParams.role" size="mini" placeholder="请输入角色名称"></el-input>
                    </el-form-item>
                    <el-form-item label="角色说明">
                      <el-input v-model="addParams.descpt" size="mini" placeholder="请输入角色说明"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :offset="4">
                    <el-form-item>
                      <el-button v-if="num==0" @click="addRole()">添加</el-button>
                      <el-button v-if="num==1" @click="changeRole()">修改</el-button>
                      <el-button @click="clearList">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </el-dialog>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { roleList, addRole, delRole, setPermission, rolePermission } from '../../api/api'

export default {
  data () {
    return {
      num: '',
      dialogFormVisible: false,
      roleList: [],
      loading: true,
      roleParams: {
        pageNum: 1,
        pageSize: 10
      },
      addParams: {
        userId: sessionStorage.getItem('userId')
      },
      delParams: {
        id: ''
      },
      goodsType: [{
        value: '0',
        label: '超级管理员'
      }],
      value: '',
      multipleSelection: [],
      editForm: [],
      delVisible: false,
      goodsInfoList: {
        productImageList: {}
      },
      treeVisible: false,
      permissionParams: {
        roleId: '',
        userId: sessionStorage.getItem('userId')
      },
      json: [],
      permissionList: [],
      defaultCheckKeys: [5, 6]
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    submitSearch () {
      this.getGoodsList()
    },
    // 格式化表单数据
    clearForm () {
      this.addParams = {
        role: '',
        descpt: '',
        userId: sessionStorage.getItem('userId')
      }
    },
    // 清除列表的搜索表单
    clearList () {
      this.clearForm()
    },
    showDialog (num) {
      this.num = num
      this.dialogFormVisible = true
    },

    // 表格数据
    getGoodsList (type) {
      this.roleList = []
      const para = Object.assign({})
      roleList(para).then(res => {
        console.log(res)
        this.roleList = res.data
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.roleParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.roleParams.pageSize = val
      this.getGoodsList()
    },
    addRole () {
      const para = Object.assign({}, this.addParams)
      addRole(para).then(res => {
        console.log(res)
        this.getGoodsList()
      })
    },
    deleteRow () {
      const para = Object.assign({}, this.delParams)
      delRole(para).then(res => {
        console.log(res)
        this.getGoodsList()
        this.delVisible = false
      })
    },
    delDialog (index, raw) {
      this.delParams.id = raw.id
      this.delParams.index = index
      this.delVisible = true
    },
    showTreeDialog (raw) {
      this.permissionParams.roleId = raw.id
      this.treeVisible = true
      const para = Object.assign({}, { roleId: this.permissionParams.roleId })
      rolePermission(para).then(res => {
        console.log(res)
        this.permissionList = JSON.parse(JSON.stringify(res.data.data))
        this.defaultCheckKeys = res.data.select
      })
    },
    getSetPermission () {
      const para = Object.assign({}, this.permissionParams, { json: this.json })
      setPermission(para).then(res => {
        console.log(res)
      })
    },
    getCheckedNodes () {
      this.json = this.$refs.tree.getCheckedKeys()
      var newarr = []
      for (var i = 0; i < this.json.length; i++) {
        var temp = { 'modelId': this.json[i] }
        newarr.push(temp)
      }
      this.json = JSON.stringify(newarr)
      this.getSetPermission()
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }
  }
</style>
